<template>
  <div>
    <el-form ref="form" :model="form" label-width="140px" :rules="rules">
      <sticky :z-index="10" :class-name="'sub-navbar '">
        <el-row :gutter="10">
          <el-col :xs="{span:10,offset:14}" :sm="{span:6,offset:18}" :md="{span:6,offset:18}" :lg="{span:4,offset:20}" :xl="{span:4,offset:20}">
            <el-button :loading="loading" type="primary" size="small" @click="onSubmit('form')">增加</el-button>
            <el-button type="warning" size="small" @click="onCancel">关闭</el-button>
          </el-col>
        </el-row>
      </sticky>
      <div class="app-con">
        <el-row :gutter="10">
          <el-col :xs="{span:24,offset:0}" :sm="{span:16,offset:0}" :md="{span:10,offset:1}" :lg="{span:10,offset:1}" :xl="{span:10,offset:1}">
            <el-form-item label="代理名称" prop="agentName">
              <el-input v-model="form.agentName" placeholder="请输入代理名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :xs="{span:24,offset:0}" :sm="{span:16,offset:0}" :md="{span:10,offset:1}" :lg="{span:10,offset:1}" :xl="{span:10,offset:1}">
            <el-form-item label="联系人手机" prop="mobile">
              <el-input v-model="form.mobile" placeholder="请输入手机号（登陆账号）" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :xs="{span:24,offset:0}" :sm="{span:16,offset:0}" :md="{span:10,offset:1}" :lg="{span:10,offset:1}" :xl="{span:10,offset:1}">
            <el-form-item label="登陆邮箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入邮箱（登陆账号）" />
            </el-form-item>
          </el-col>
        </el-row>
<!--        <el-row :gutter="10">-->
<!--          <el-col :xs="{span:24,offset:0}" :sm="{span:16,offset:0}" :md="{span:10,offset:1}" :lg="{span:10,offset:1}" :xl="{span:10,offset:1}">-->
<!--            <el-form-item label="密码" prop="password">-->
<!--              <el-input v-model="form.password" show-password placeholder="请输入8-16位的密码" />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->
        <el-row :gutter="10">
          <el-col :xs="{span:24,offset:0}" :sm="{span:16,offset:0}" :md="{span:10,offset:1}" :lg="{span:10,offset:1}" :xl="{span:10,offset:1}">
            <el-form-item label="联系人姓名" prop="sales">
              <el-input v-model="form.sales" placeholder="请输入姓名" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :xs="{span:24,offset:0}" :sm="{span:16,offset:0}" :md="{span:10,offset:1}" :lg="{span:10,offset:1}" :xl="{span:10,offset:1}">
            <el-form-item label="企业注册地" prop="areaSelect1" style="width: 600px">
              <area-select
                :area-num="form.provCode"
                :area-name="form.provName"
                :city-num="form.cityCode"
                :city-name="form.cityName"
                placeholder="请选择企业注册地"
                @getAreaSelect="getAreaSelect2"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :xs="{span:24,offset:0}" :sm="{span:16,offset:0}" :md="{span:10,offset:1}" :lg="{span:10,offset:1}" :xl="{span:10,offset:1}">
            <el-form-item label="注册地址" prop="address">
              <el-input v-model="form.address" placeholder="请输入注册地址" />
            </el-form-item>
          </el-col>
        </el-row>
                <el-row :gutter="10" style="margin: 60px 100px">
          <el-col :xs="{span:24,offset:0}" :sm="{span:16,offset:0}" :md="{span:10,offset:1}" :lg="{span:10,offset:1}" :xl="{span:10,offset:1}">
            <div>增加代理将同步发送邮件到填写的登陆邮箱中，手机号码和登陆邮箱将作为代理用户名，初始默认密码为00000000</div>
            </el-col>
        </el-row>
        <!--        <el-row :gutter="10">-->
        <!--          <el-col :xs="{span:24,offset:0}" :sm="{span:16,offset:0}" :md="{span:10,offset:1}" :lg="{span:10,offset:1}" :xl="{span:10,offset:1}">-->
        <!--            <el-form-item label="状态" prop="status">-->
        <!--              <el-switch-->
        <!--                v-model="form.status"-->
        <!--                active-value="1"-->
        <!--                inactive-value="0"-->
        <!--                active-text="激活"-->
        <!--                inactive-text="停用"-->
        <!--              />-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--        </el-row>-->
        <!--        {{form.status}}-->
      </div>
    </el-form>
  </div>
</template>

<script>
import { agentAdd } from '@/api/agent'
import Sticky from '@/components/Sticky'
import AreaSelect from '@/components/AreaSelect'
export default {
  name: 'AgentAdd',
  components: {
    Sticky,
    AreaSelect
  },
  data() {
    const validateMobile = (rule, value, callback) => {
      const regMobile = /^1[3|4|5|6|7|8|9][0-9]{9}$/ // /^1(3\d|4[5-8]|5[0-35-9]|6[567]|7[01345-8]|8\d|9[025-9])\d{8}$/
      if (!value) {
        callback(new Error('请填写手机号码'))
      } else if (value.length < 11) {
        callback(new Error('请填写手机号码'))
      } else if (!regMobile.test(value)) {
        callback(new Error('请填写正确手机号'))
      } else {
        callback()
      }
    }
    const validateEmail = (rule, value, callback) => {
      // const regEmail = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      const regEmail = /^[a-z0-9]+([._\\-]*[a-z0-9])+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (!value) {
        callback(new Error('请填写邮箱'))
      } else if (value.length < 1) {
        callback(new Error('请填写邮箱'))
      } else if (!regEmail.test(value)) {
        callback(new Error('请填写正确邮箱'))
      } else {
        callback()
      }
    }
    const validateAreaSelect1 = (rule, value, callback) => {
      if (this.form.areaSelect1.cityName === '' || this.form.areaSelect1.cityName === undefined || this.form.areaSelect1.cityName === null) {
        return callback(new Error('请选择地区'))
      }
      callback()
    }
    return {
      loading: false,
      form: {
        agentName: '',
        mobile: '',
        email: '',
        sales: '',
        address: '',
        password: '00000000',
        areaSelect1: [],
        provCode: '',
        provName: '',
        cityCode: '',
        cityName: '',
        distCode: '',
        distName: '',
        areaCode: '',
        areaName: '',
        status: '1'
      },
      rules: {
        agentName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在5到20个字符', trigger: 'blur' }
        ],
        mobile: [
          { required: true, trigger: 'change', validator: validateMobile }
        ],
        email: [
          { required: true, trigger: 'change', validator: validateEmail }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 16, message: '长度在6到16个字符', trigger: 'blur' }
        ],
        sales: [
          { required: true, message: '请填写联系人姓名', trigger: 'change' },
          { min: 1, max: 15, message: '最多录入15个字符', trigger: 'change' }
        ],
        address: [
          { required: true, message: '请填写注册地址', trigger: 'change' },
          { min: 1, max: 50, message: '最多录入50个字符', trigger: 'change' }
        ],
        areaSelect1: [
          { required: true, trigger: 'change', validator: validateAreaSelect1 }
        ]
      }
    }
  },
  created() {
  },
  methods: {
    onSubmit(form) {
      if (this.form.areaSelect1 !== undefined) {
        this.form.provCode = this.form.areaSelect1.areaCode
        this.form.provName = this.form.areaSelect1.areaName
        this.form.cityCode = this.form.areaSelect1.cityCode
        this.form.cityName = this.form.areaSelect1.cityName
        this.form.distCode = this.form.areaSelect1.distCode
        this.form.distName = this.form.areaSelect1.distName
      }
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.loading = true
          agentAdd(this.form).then(response => {
            if (response.result === 1) {
              this.$message({
                message: '增加成功', type: 'success'
              })
              this.onClose()
            } else if (response.result === 0) {
              this.$message({
                message: '手机或邮箱已注册', type: 'warning'
              })
            } else {
              this.$message({
                message: '增加失败', type: 'warning'
              })
            }
            this.loading = false
          }).catch(() => {
            this.loading = false
            this.$message({
              message: '增加失败', type: 'warning'
            })
          })
        } else {
          return false
        }
      })
    },
    onCancel() {
      this.onClose()
    },
    onClose() {
      this.$parent.$parent.$children[2].closeSelectedTag({ path: this.$route.path, name: this.$route.name, fullPath: this.$route.fullPath, meta: this.$route.meta })
    },
    getAreaSelect2(msg) { // msg就是传过来的数据了  这只是个形参  名字可以随意
      this.form.areaSelect1 = msg// 然后将数据赋值给chindVal
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
.app-con{
  padding: 20px 10px 50px 10px;
}
</style>
